<template>
  <div class="home">
    <div v-for="(item,index) of musics" :key="item.title">
      <h4 @click="handleDetail(index)">{{ item.title }}</h4>
      <div class="container">
        <MusicItem
          @toggle="handleToggle"
          v-for="val of item.res"
          :key="val.id"
          :item="val"
        ></MusicItem>
      </div>
    </div>
  </div>
</template>

<script>
import MusicItem from "../../components/music/MusicItem.vue";
import HomeHttp from "../../model/HomeHttp";

export default {
  data() {
    return {
      musics: {},
    };
  },
  name: "Home",
  async mounted() {
    try {
      var hots = await HomeHttp.getHotMusic();
      var news = await HomeHttp.getNewMusic();
      var djs = await HomeHttp.getDjMusic();
      this.musics = {
        hots: {
          title: "热门音乐",
          res: hots.data.playlists.slice(0, 3),
        },
        news: {
          title: "最新音乐",
          res: news.data.albums.slice(0, 3),
        },
        djs: {
          title: "主播电台",
          res: djs.data.result.slice(0, 3),
        },
      };
    } catch (error) {
      console.log(error);
    }
  },
  components: {
    MusicItem,
  },
  methods: {
    handleToggle(id,name) {
      this.$store.commit("changeName",name)
      this.$router.push(`/detail/${id}`)
    },
    handleDetail(index){
      console.log(index);
      this.$router.push(`/more?title=${index}`)
    }
  },
};
</script>
<style scoped>
h4{
  padding: 30px;
}
</style>